/*------------全局样式-----------*/
html, body, ul, li, span, p, div,
a, form, input, button, img, h1,
h2, h3, h4, h5, h6, header, td,
th, dd, dl, tr, table, footer, main,
aside, article, section, select, option {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 100px;
}

body {
    font-size: 16px;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}

#app {
    background-color: #011957;
    max-width: 1200px;
    min-width: 375px;
    margin: 0 auto;
}

/*---banner---*/
.banner a {
    display: block;
}

.banner a img {
    width: 100%;
    height: auto;
}

/*---导航列表---*/
.book-list-group {
    width: 100%;
    overflow: hidden;
}

.book-list-group .book-list-item {
    float: left;
    width: 20%;
    height: .5rem;
    padding: .05rem;
}

.book-list-group .book-list-item .list-item-link {
    color: #ffffff;
    background-color: #6544B2;
    display: flex;
    height: 100%;
    border-radius: .05rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 .1rem;
    font-size: .24rem;
}

.book-list-group .book-list-item .list-item-link .link-text {
    font-size: 0.18rem;
}

.book-list-group .book-list-item .list-item-link .link-arrow {
    height: .2rem;
    width: .2rem;
    display: flex;
    border-radius: .05rem;
    background-color: #011957;
    justify-content: center;
    align-items: center;
    padding-bottom: .03rem;
}

/*---图书列表---*/
.books-group {
    overflow: hidden;
}

.books-group .book {
    width: 50%;
    float: left;
    padding: .1rem;
}

.books-group .book .book-wrap {
    background-color: #ffffff;
    border-radius: .1rem;
    padding: .1rem;
}

.books-group .book .book-wrap .book-link {
    display: flex;
    justify-content: center;
    align-items: center;
}

.books-group .book .book-wrap .book-link img {
    width: 100%;
    border-radius: .1rem;
}

.books-group .book .book-wrap .book-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .32rem;
    font-weight: 600;
}

.books-group .book .book-wrap .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.books-group .book .book-wrap .operate .price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.books-group .book .book-wrap .operate .price .sub-price {
    color: red;
    font-size: .36rem;
    font-weight: 600;
}

.books-group .book .book-wrap .operate .price .normal-price {
    color: gray;
    text-decoration: line-through;
    font-size: .28rem;
}

.books-group .book .book-wrap .operate .buy {
    background-color: red;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: .1rem;
    font-size: .26rem;
    font-weight: bold;
}

.books-group .book .book-wrap .operate .buy div {
    width: .8rem;
    height: .4rem;
    text-align: center;
    line-height: .4rem;
}

.alert{
    position: fixed;
    top: 0;
    left: 0;
    text-align:center;
    width:100vw;
    height:100vh;
    z-Index: 998;
    background:rgba(0,0,0,.3);
    display: none;
}

.box{
    position: absolute;
    text-align: center;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 3rem;
    height: 1.5rem;
    background: #f8f8f8;
    border-radius: 20px;
    font-size: 50px;
}

.item{
    font-size: .2rem;
    position: absolute;
    text-align: center;
    top: 10%;
    left:50%;
    transform: translate(-50%,-50%);
}

.succees{
    font-size: .5rem;
    position: absolute;
    height: .5rem;
    width: 100%;
    text-align: center;
    top: 50%;
    left:55%;
    transform: translate(-50%,-50%);
}

/*---媒体查询---*/
/*1200px--780px*/
@media screen and (min-width: 780px) and (max-width: 1200px) {
    .book-list-group .book-list-item {
        width: 25%;
        height: .45rem;
    }

    .book-list-group .book-list-item .list-item-link {
        font-size: .20rem;
        border-radius: .05rem;
    }
}

/*780px---480px*/
@media screen and (min-width: 480px) and (max-width: 780px) {
    .book-list-group .book-list-item {
        width: 25%;
        height: .45rem;
    }

    .book-list-group .book-list-item .list-item-link {
        font-size: .14rem;
        border-radius: .05rem;
    }
}

/*小于480px*/
@media screen and (max-width: 480px) {
    .book-list-group .book-list-item {
        width: 33.33%;
        height: .8rem;
    }

    .book-list-group .book-list-item .list-item-link {
        font-size: .32rem;
    }

    .book-list-group .book-list-item .list-item-link .link-arrow {
        height: .4rem;
        width: .4rem;
        padding-bottom: .03rem;
    }

    .books-group .book {
        width: 100%;
    }
}
